import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import MyUI from '@/components'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'
import i18n from '@/lang'
import '@/icons/index.js' // 注册全局组件！

import '@/permission' // 路由守卫
Vue.use(MyUI)
// 注册成全局组件（公共组件）
// import PageTools from '@/components/PageTools'
// Vue.component('PageTools', PageTools)

// import '@/utils/test.js'

// set ElementUI lang to EN
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)
Vue.config.productionTip = false

// 自定义指令
// 1. 定义指令
Vue.directive('focus', {
  // 并绑定的元素插入dom时，自动执行
  // el：dom对象
  // binding:
  inserted: function(el, binding) {
    console.log(el, binding)
    el.focus()
    el.style.backgroundColor = binding.value
  }
})
// 2. 使用指令
// <com v-focus />

Vue.directive('allow', {
  // 并绑定的元素插入dom时，自动执行
  // el：dom对象
  // binding:
  inserted: function(el, binding) {
    console.log('当前元素上绑定的 权限点数据：', binding.value)
    console.log('当前的vuex中的points', store.state.user.userInfo.roles.points)
    const points = store.state.user.userInfo.roles.points
    if (points.includes(binding.value)) {
      // 要正常展示元素
    } else {
      // 1. 不要显示元素
      // el.style.display = 'none'
      // 2. 不要有这个元素
      console.log('不要有这个元素')
      el.parentNode.removeChild(el)
    }
  }
})

// obj就是vue的插件
const obj = {
  install: function(Vue) {
    // console.log(abc === Vue)
    console.log('obj, install.....', Vue)
    Vue.prototype.abcd = 100
    Vue.prototype.$hello = () => {
      alert('vue')
    }
  }
}
// 加载插件
Vue.use(obj)

new Vue({
  el: '#app',
  router, // --> $router, $route
  store, // --> $store
  i18n, // --> $t, $i18n
  render: h => h(App)
})

console.log('当前的环境变量是', process.env.VUE_APP_NUM)
